﻿<h1 class="page-header" page-header="Transactions">Transactions</h1>

<div class="spacing-bottom-sm" ng-init="$view = 0">
    <a class="btn btn-info" ui-sref="transaction-add">
        <b class="glyphicon glyphicon-plus"></b> New transaction
    </a>

    <button class="btn btn-default" ng-click="$view = $view == 0 ? -1 : 0" ng-class="{ 'active' :$view == 0  }">
        <b class="glyphicon glyphicon-search"></b> Quick search
    </button>

    <button class="btn btn-default" ng-click="$view = $view == 1 ? -1 : 1" ng-class="{ 'active' :$view == 1  }">
        <b class="glyphicon glyphicon-filter"></b> Advanced search
    </button>
</div>

<div ng-switch="$view">
    <div class="row" ng-switch-when="0">
        <div class="col-sm-6">
            <div class="input-group spacing-bottom-sm">
                <input class="form-control" ng-model="filters.transactionName" placeholder="Search by address, agent or MLS #" />
                <span class="input-group-btn">
                    <button class="btn btn-info" type="button" ng-click="quickSearch()">Search transactions</button>
                </span>
            </div>
        </div>
    </div>
    <div ng-switch-when="1">
        <form class="spacing-bottom-sm">
            <div class="form-group row">
                <div class="col-sm-3">
                    <input class="form-control" ng-model="filters.transactionName" placeholder="Search by address, agent or MLS #" />
                </div>
                <div class="col-sm-3">
                    <input class="form-control" ng-model="filters.closeDateStart" placeholder="Close date start (m/d/yyyy)" />
                </div>
                <div class="col-sm-3">
                    <input class="form-control" ng-model="filters.expiryDateStart" placeholder="Expiry date start (m/d/yyyy)" />
                </div>
                <div class="col-sm-3">
                    <button class="btn btn-info" type="button" ng-click="quickSearch()">Search transactions</button>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-3">
                    <select class="form-control" ng-model="filters.status">
                        <option>Any status</option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <input class="form-control" ng-model="filters.closeDateEnd" placeholder="Close date end (m/d/yyyy)" />
                </div>
                <div class="col-sm-3">
                    <input class="form-control" ng-model="filter.expiryDateEnd" placeholder="Expiry date end (m/d/yyyy)" />
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/ng-template" id="transactionInfo">
    <div class="row" ng-if="transaction.transactionNo">
        <div class="col-sm-5">MLS:</div>
        <div class="col-sm-7">{{transaction.transactionNo}}</div>
    </div>
    <div class="row" ng-if="transaction.buyerName">
        <div class="col-sm-5">Buyer:</div>
        <div class="col-sm-7">{{transaction.buyerName}}</div>
    </div>
    <div class="row" ng-if="transaction.sellerName">
        <div class="col-sm-5">Seller:</div>
        <div class="col-sm-7">{{transaction.sellerName}}</div>
    </div>
    <div class="row" ng-if="transaction.listPrice">
        <div class="col-sm-5">List price:</div>
        <div class="col-sm-7">{{transaction.listPrice | currency}}</div>
    </div>
    <div class="row" ng-if="transaction.sellPrice">
        <div class="col-sm-5">Sale price:</div>
        <div class="col-sm-7">{{transaction.sellPrice | currency}}</div>
    </div>
    <div class="row" ng-if="transaction.acceptedOn">
        <div class="col-sm-5">Accepted on:</div>
        <div class="col-sm-7">{{transaction.acceptedOn | date: 'MMMM dd, yyyy'}}</div>
    </div>
    <div class="row" ng-if="transaction.closeDate">
        <div class="col-sm-5">Closes on:</div>
        <div class="col-sm-7">{{transaction.closeDate | date: 'MMMM dd, yyyy'}}</div>
    </div>
    <div class="row" ng-if="transaction.createdDate" style="min-width: 220px;">
        <div class="col-sm-5">Added on:</div>
        <div class="col-sm-7">{{transaction.createdDate | date: 'MMMM dd, yyyy'}}</div>
    </div>
</script>

<script type="text/ng-template" id="transactionAgents">
    Listing:
    <ul style="list-style: none; padding: 0;">
        <li ng-repeat="item in transaction.listingAgents">{{item}}</li>
    </ul>
    Selling:
    <ul style="list-style: none; padding: 0;">
        <li ng-repeat="item in transaction.sellingAgents">{{item}}</li>
    </ul>
</script>

<table ng-table="tableParams" class="table table-hover table-bordered">
    <tr ng-repeat="transaction in $data">
        <td>
            <b class="glyphicon glyphicon-list-alt" data-animation="am-flip-x" bs-tooltip data-content-template="transactionInfo" data-placement="bottom"></b>
        </td>
        <td data-title="'Transaction'" header-class="col-sm-5" sortable="'name'">
            <a ui-sref="transaction-view({id: transaction.id})">{{transaction.name}}</a>
        </td>
        <td data-title="'Status'" header-class="col-sm-1">{{transaction.statusName}}</td>
        <td data-title="'Agents'" class="text-center">
            <b ng-if="transaction.assignAgents.length" class="glyphicon glyphicon-user" bs-tooltip data-content-template="transactionAgents" data-placement="bottom"></b>
        </td>
        <td data-title="'Location'" header-class="col-sm-2">{{transaction.locationName}}</td>
        <td data-title="'Close date'" header-class="col-sm-2" sortable="'closeDate'">{{transaction.closeDate | date: 'MMMM dd, yyyy'}}</td>
        <td class="dropdown" header-class="col-sm-1">
            <a class="dropdown-toggle" href="#">Action <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li>
                    <a ui-sref="transaction-view({id: transaction.id})"><b class="glyphicon glyphicon-info-sign"></b> View</a>
                </li>
                <li>
                    <a ui-sref="transaction-edit({id: transaction.id})"><b class="glyphicon glyphicon-edit"></b> Edit</a>
                </li>
            </ul>
        </td>
    </tr>
</table>
